<template>
  <div class="VAvatar">
    <div>
      <a-avatar :size="64" icon="user" />
      <a-avatar size="large" icon="user" />
      <a-avatar icon="user" />
      <a-avatar size="small" icon="user" />
    </div>
    <br />
    <div>
      <a-avatar shape="square" :size="64" icon="user" />
      <a-avatar shape="square" size="large" icon="user" />
      <a-avatar shape="square" icon="user" />
      <a-avatar shape="square" size="small" icon="user" />
    </div>
    <div>
      <span style="margin-right:24px">
        <a-badge :count="1">
          <a-avatar shape="square" icon="user" />
        </a-badge>
      </span>
      <span>
        <a-badge dot>
          <a-avatar shape="square" icon="user" />
        </a-badge>
      </span>
    </div>
    <a-avatar
      shape="square"
      size="large"
      :style="{ backgroundColor: '#f56a00', verticalAlign: 'middle' }"
    >
      黄
    </a-avatar>
    <br />
    <a-badge count="109" :number-style="{ backgroundColor: '#52c41a' }" />
    <br />
    <a-badge count="0" show-zero>
      <a href="#" class="head-example" />
    </a-badge>
    <br />
    <a-badge count="0">
      <a href="#" class="head-example" />
    </a-badge>
    <br />
    <a-badge>
      <a-icon slot="count" type="clock-circle" style="color: #f5222d" />
      <a href="#" class="head-example" />
    </a-badge>
  </div>
</template>
